<template>
    <!-- <view class="f padding-lr-sm">
  <view class="cuIcon-notification text-xxl text-orange"></view>
  <view>| </view>
  <view></view>
</view> -->
    <view class="wrapX">
        <view class="wrapOut" style="display: flex">
            <!-- <view class="cuIcon-notification text-xxl text-orange" style="width: 20px;">12</view> -->
            <view class="cuIcon-notification" style="width: 50rpx; font-size: 45rpx; color: #3fd0aa"></view>
            <view class="wrapInner" style="width: calc(100% - 40px)">
                <view class="contant" style="color: #3fd0aa">{{ notice }}</view>
            </view>
        </view>
    </view>
</template>

<script>
// import cuCustom from "../../colorui/components/cu-custom"; // PS: 此组件与全局组件重名，已注释（可能误判，请开发者根据实际情况处理）。
export default {
    components: {},
    data() {
        return {
            items: [
                {
                    title: '[通知模板1] 消息1 明前翠芽新品上市...'
                },
                {
                    title: '[通知模板2] 消息2 明前毛尖新品上市...'
                }
            ],
            notice: ''
        };
    },
    methods: {
        attached: function () {
            this.autoChangeX();
        },

        handlePageShow() {
            this.autoChangeX();
        },

        autoChangeX: function () {
            // 定义初始第一条的内容
            let index = 0;
            const { items } = this;
            this.setData({
                notice: items[0].title
            });
            index++;
            // 设置定时器，和动画时间间隔相等
            // 每隔13秒更换X轴公告的内容
            setInterval(() => {
                if (index === items.length - 1) {
                    this.setData({
                        notice: items[index].title
                    });
                    index = 0;
                } else {
                    this.setData({
                        notice: items[index].title
                    });
                    index++;
                }
            }, 8000);
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    created: function () {}
};
</script>
<style>
@import './notice.css';
</style>
